/**
 * 
 * @param {Element} el 需要动画的元素
 * @param {Numbner} target 移动的目标距离
 * @param {Number} fps 帧率
 */
function animate(el, target, fps = 60) {
    //频繁调用这个函数 会对同一个元数设定多个定时器 会对动画产生抖动的效果所以我们给元素设置定时器之前 要清除上一个定时器 这样在元素上只保留了一个定时器
    if (el.interval) {
        clearInterval(el.interval)
    }
    //帧率对应的定时器时间
    let timer = Math.round(1000 / fps)
    //获取盒子的初始位置
    let leader = el.offsetLeft;
    //设置步长 每隔一段时间 前进10px
    //怎么让动画停下来?清除定时器就可以了
    el.interval = setInterval(() => {
        let step = 15
        // console.log(leader)
        //当leader盒子的位置小于目标距离的时候 那么就需要进行动画运动
        //需要给这个step添加正负了
        //判断leader和target之间的关系 如果leader大于target 要走正值 如果leader小于target 要走负值
        step = leader > target ? -step : step

        if (Math.abs(target - leader) > Math.abs(step)) {
            //将leader的结果设置给盒子就行二楼
            leader += step
            el.style.left = leader + "px"
        } else {
            clearInterval(el.interval)
            //手动把元素放到目标距离
            el.style.left = target + "px"
        }
    }, timer)
}